<template>
  <div class="mbtibox">
    <div class="mbtibox-header mb-12">以下4个维度组合形成候选人的MBTI人格类型:</div>
    <div class="mbtibox-body">
      <div class="mbtibox-bodyitem">
        <div class="mbtibox-bodyitembox" v-for="(item,index) in data.myers_briggs_type_indicator" :key="index">
          <div class="mbtibox-bodyitemboxcenter">
            <div class="flex-row space-between" v-if="item.name.indexOf('外向') > -1 || item.name.indexOf('内向') > -1">
              <div>外向[E]</div>
              <div>内向[I]</div>
            </div>
            <div class="flex-row space-between" v-if="item.name.indexOf('感觉') > -1 || item.name.indexOf('直觉') > -1">
              <div>感觉[S]</div>
              <div>直觉[N]</div>
            </div>
            <div class="flex-row space-between" v-if="item.name.indexOf('思考') > -1 || item.name.indexOf('情感') > -1">
              <div>思考[T]</div>
              <div>情感[F]</div>
            </div>
            <div class="flex-row space-between" v-if="item.name.indexOf('判断') > -1 || item.name.indexOf('感知') > -1">
              <div>判断[J]</div>
              <div>感知[P]</div>
            </div>
            <div class="mbtibox-progress">
              <progress-component :leftNum="item.dic"></progress-component>
            </div>
            <div class="mt-12">
              <span v-if="item.name.indexOf('外向') > -1" class="f-12">获取能量的方式: 与人互动 vs 独处思考</span>
              <span v-if="item.name.indexOf('感觉') > -1" class="f-12">获取信息的方式: 具体事实 vs 抽象模式</span>
              <span v-if="item.name.indexOf('思考') > -1" class="f-12">决策的方式: 逻辑分析 vs 价值考量</span>
              <span v-if="item.name.indexOf('判断') > -1" class="f-12">生活的方式: 计划有序 vs 灵活适应</span>
            </div>
          </div>
        </div> 
      </div> 
    </div>
    <div class="mbtibox-footer mt-12">
      <div class="f-14">候选人的MBTI类型</div>
      <div class="f-28 bold color-blur">{{ mbtidata }}</div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';
import progressComponent from './progress.vue'
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})

const mbtidata = computed(() => {
  let a = {
    0: ['E', 'I'],
    1: ['S', 'N'],
    2: ['T', 'F'],
    3: ['J', 'P'] 
  }
  return props.data.myers_briggs_type_indicator.reduce((pre, cur, index) => {
    if (cur.name.indexOf('外向') > -1 || cur.name.indexOf('内向') > -1) {
      pre = pre + (cur.dic <= 50 ? a[0][0] : a[0][1])
    }
    if (cur.name.indexOf('感觉') > -1 || cur.name.indexOf('直觉') > -1) {
      pre = pre + (cur.dic <= 50 ? a[1][0] : a[1][1])
    }
    if (cur.name.indexOf('思考') > -1 || cur.name.indexOf('情感') > -1) {
      pre = pre + (cur.dic <= 50 ? a[2][0] : a[2][1])
    }
    if (cur.name.indexOf('判断') > -1 || cur.name.indexOf('感知') > -1) {
      pre = pre + (cur.dic <= 50 ? a[3][0] : a[3][1])
    }
    return pre
  }, '')
})
</script>

<style lang="scss" scoped>
.mbtibox{
  &-footer{
    display:flex;
    flex-direction: column;
    align-items: center;
  }
  &-body{
   
  }
  &-bodyitem{
    display:flex;
    border: #ddd 1px solid;
    flex-wrap: wrap;
    border-bottom: none;
  }
  &-bodyitembox{
    flex: 0 0 auto;
    width: 50%;
    position: relative; 
    border-bottom: #ddd 1px solid;
  }
  &-bodyitembox::after{
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    width: 1px;
    content: '';
    border-right: #ddd 1px solid;
  }
  &-bodyitembox:nth-child(2n){
    &::after{
      display: none;
    }
  }
  &-bodyitemboxcenter{
    padding: 12px;
  }
}
</style>